<!--  -->
<template>
  <div v-show="showProgress" class="ml-30">
    <el-card>
      <el-row>
        <el-col :span="2">
          <div class="notice">{{ msgInfo.title }}</div>
        </el-col>
        <el-col :span="22">
          <el-progress
            :percentage="currentPercent > 100 ? 100 : currentPercent"
            :stroke-width="14"
          />
          <p>{{ msgInfo.index }}/{{ msgInfo.total }}</p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import { initWebSocket } from '@/utils/websocket'
  import { mapGetters } from 'vuex'
  import _ from 'lodash'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {}
    },
    //监听属性 类似于data概念
    computed: {
      ...mapGetters({
        showProgress: 'ws/showProgress',
        msgInfo: 'ws/msgInfo',
      }),
      currentPercent() {
        if (
          this.msgInfo.index == 0 ||
          !this.msgInfo.index ||
          !this.msgInfo.total
        )
          return 0
        return _.ceil(this.msgInfo.index / this.msgInfo.total, 2) * 100 - 0
      },
    },
    //监控data中的数据变化
    watch: {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      // initWebSocket()
    },
    //方法集合
    methods: {},
  }
</script>
<style lang="scss" scoped>
  .notice {
    font-size: 18px;
    font-weight: 700;
    color: #000;
  }
  .status {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 700;
  }
  ::v-deep .el-card {
    height: 56px;
    margin-bottom: 0;
  }
</style>
